<link rel="stylesheet" href="/assets/home/css/email.css" />


<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">邮箱验证</h1>
</header>

<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="/assets/home/images/avatar.jpg" />
    </div>
</div>

<form class="mui-input-group" method="post" enctype="multipart/form-data">      
    <div class="mui-input-row">
        <label>邮箱：</label>
        <input type="text" name="email" value="{$AutoLogin.email}" class="mui-input-clear" placeholder="请输入邮箱" required disabled />
    </div>

    <div class="mui-input-row">
        <label>验证码：</label>
        <input type="text" name="code" class="mui-input-clear" placeholder="请输入验证码" required />
    </div>
    
    
    <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary">立即验证</button>
        <button type="button" id="send" class="mui-btn mui-btn-success">发送邮件</button>
    </div>
</form>

<script>
    var sec = 60
    var T

    //点击发送邮件按钮
    $("#send").click(async function(){
        //确认对话框
        mui.confirm(
            '是否确认发送邮箱验证码',
            '邮件提醒',
            ['确认','取消'],
            (res) => 
            {
                if(res.index === 0)
                {
                    $(this).html('邮件发送中....')
                    $(this).attr('disabled', true)

                    //发送ajax请求，让后端来帮我发送验证码
                    $.ajax({
                        url: `{:url('home/business/email')}`,
                        type:'POST',
                        dataType: 'json',
                        data: {action: 'send'},
                        success: (success) =>
                        {
                            //轻提醒
                            mui.toast(success.msg, {duration: 3000})

                            if(success.code)
                            {
                                //倒计时
                                $(this).html(sec)
                                $(this).attr('disabled', true)
                                T = setInterval(autoplay, 1000)
                            }
                        },
                    })

                }
            }
        )
    })

    function autoplay()
    {
        var num = $("#send").html()
            num = parseInt(num)

        if(num <= 0)
        {
            //停止定时器
            clearInterval(T)
            $("#send").removeAttr('disabled')
            $("#send").html('重新发送验证码')
        }else
        {
            $('#send').html(num-1)
        }
    }
</script>